<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下订单</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/css/sm.min.css">
    <link rel="stylesheet" href="/static/css/sm-extend.min.css">
    <!--icon css-->
    <!--<link rel="stylesheet" href="css/icon-style.css">-->

    <style>
        .list-block {
            margin: .4rem 0!important;
        }
        a{
            color: gray;
        }
    </style>
</head>

<body>
<header class="bar bar-nav">
    <a class="icon icon-left pull-left" href="javascript:history.back(-1)"></a>
    <h1 class="title">下单</h1>
</header>

<div class="content">
    <!-- 头部信息-->
    <div class="list-block media-list">
        <ul>
            <li>
                <div class="item-link item-content">
                    <div class="item-media"><img src=""  style='width: 4rem;height: 4rem'></div>
                    <div class="item-inner">
                        <span>商品标题</span>
                        <div class="item-subtitle" style="font-size: 1rem;font-weight: 700;color: red">￥00.00</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 交易信息-->
    <div class="list-block" style="margin: 0 0">
        <ul>
            <li class="item-content">
                <div class="item-inner">
                    <input type="number" name="phone" placeholder="联系方式">
                </div>
            </li>

        </ul>
    </div>
    <!--交易地点-->
    <div class="content-block-title" style="margin: .5rem 1rem" >交易地点</div>
    <div class="list-block" style="margin: 0 0">
        <ul>
            <li class="item-content">
                <div class="item-inner">
                    <input type="text" id='address_area' name="address_area" value="重庆 渝中区">
                </div>
            </li>

            <li class="item-content">
                <div class="item-inner">
                    <textarea maxlength='50' name="address" placeholder="详细地址"></textarea>
                </div>
            </li>

            <div class="content-block-title" style="margin:0;padding: .5rem 1rem;background: rgb(238, 238, 238)" >备注</div>

            <li class="item-content">
                <div class="item-inner">
                    <textarea maxlength='200' name="remarks" placeholder="要对卖家说的话，都填在这里"></textarea>
                </div>
            </li>
        </ul>
    </div>

    <div class="tc"></div>
    <!-- 底部-->
    <div class="bar bar-tab">
        <div class="" style="width: 100%;padding: 0 .5rem">
            <div class="pull-left price" style="margin: .6rem;color: red;font-weight: 700">金额：￥0.00</div>

            <div class=" button button-fill button-danger pull-right" onclick="submitOrder()"
                 style="height:1.8rem;line-height: 1.8rem;padding:0 2rem;font-size: .85rem">确定</div>
        </div>
    </div>
</div>


<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-city-picker.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/deatilPage.js' charset='utf-8'></script>
<script>
    //省市区插件
    $("#address_area").click(function(){
        $("#address_area").cityPicker({
            toolbarTemplate: '<header class="bar bar-nav">\
                                <button class="button button-link pull-right close-picker">确定</button>\
                                <h1 class="title">选择交易地点</h1>\
                                </header>'
        });
    });
    var url = location.search; //获取url中"?"符后的字串
    var strs = url.split("=");
    var id = strs[1];
    $(document).ready(function () {
//			图片
        $(".swiper-container").swiper();

        //商品详情异步函数
        $.ajax({
            url: '/sys/good/detail',
            type: 'post',
            data: {goodId: id},
            success: function (re) {
                if (!re.status) {
                    if(!re.data.GoodDetail.status) {//判断是否已下架或者售罄
                        var goodDetail = re.data.GoodDetail.data;
                        //分割图片
                        var strs1 = new Array();
                        strs1 = goodDetail.goodImg.split(',');
                        $('.item-link').find('img').attr('src',strs1[0]);
                        $('.item-link').find('span').html(goodDetail.detail);
                        $('.item-link').find('.item-subtitle').html(goodDetail.price);
                        $('.price').html('金额：'+goodDetail.price);
                        $('.item-link').click(function (){//商品详情跳转
                            goodDetailPage(id);
                        });
                    }else {
                        $.toast(re.data.GoodDetail.msg);
                        $('.content').append("<p class=\"text-center\">"+re.data.GoodDetail.msg+"</p>");
                    }
                }else {
                    $.toast(re.msg);
                }
            }
        });
    });
    function submitOrder() {
        var phone = $('input[name=phone]').val();//联系方式
        var address = $('input[name=address_area]').val()+$('textarea[name=address]').val();//交易地址
        var remarks = $('textarea[name=remarks]').val();//备注留言
        var money = $('.item-link').find('.item-subtitle').text();
        var num = 1;

        /**
         *
         * 获取当前时间
         */
        function getNow(s) {
            return s < 10 ? '0' + s: s;
        }

        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        var s=myDate.getSeconds();

        var now=year+'-'+getNow(month)+"-"+getNow(date)+" "+getNow(h)+':'+getNow(m)+":"+getNow(s);

        var phoneRegex=/^([1][3,4,5,7,8,9][0-9]\d{8})$/;//电话号码格式
        if (phone == ''){
            $.toast("联系方式不能为空");
        } else if (address == ''){
            $.toast("交易地址不能为空");
        } else if (!phoneRegex.test(phone)) {
            $.toast("请输入正确的联系方式");
        }else {
            $.confirm("请确认订单信息<br>联系方式:"+phone+"<br>预定交易地址:"+address+"<br>备注:"+remarks+"<br>下单时间:"+now+"<br>金额:"+money,
                function () {
                $.ajax({
                    url: '/front/order/create',
                    type: 'post',
                    data: {goodId:id,address:address,note:remarks,num:num,phone:phone},
                    success: function (re) {
                        if(!re.status){
                            $.alert('下单成功，赶快前往我买到的查看订单进度吧',function () {
                                window.location.href = '/page/myBuyUI';
                            });
                        }else {
                            $.toast(re.msg);
                        }
                    }
                });
            },
                function () {
                    // $.alert('你取消了订单');
                }
            );

        }
    }
</script>
</body>

</html>